<template>
<div>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in gallery" :key="item.id">
      <img :src="item.img_url" :alt="item.img_desc" width="100%" style="display: block;">
    </van-swipe-item>
  </van-swipe>
  <tips></tips>
  <!--商品信息-->
  <div class="info">
    <h3>{{info.name}}</h3>
    <p>{{info.goods_brief}}</p>
    <div>{{info.retail_price | priceFormat}}</div>
  </div>
  <van-cell @click="show=!show" title="点击展示弹出层" is-link style="margin-bottom: .2rem;"/>
<!--  商品属性  -->
  <div class="attribute">
    <h4>商品参数</h4>
    <ul>
      <li v-for="(item,index) in attribute" :key="index">
        <span>{{item.name}}</span>
        <section class="van-ellipsis">{{item.value}}</section>
      </li>
    </ul>
  </div>
  <div class="desc">
  </div>
  <div class="title">
    <span>常见问题</span>
  </div>
  <div class="issue">
      <ul>
        <li v-for="item in issue" :key="issue.id">
          <h3>{{item.question}}</h3>
          <p>{{item.answer}}</p>
        </li>
      </ul>
  </div>
  <div class="title">
    <span>大家都在看</span>
  </div>
  <product-list :goodsList="goodsList"></product-list>
  <van-sku
      v-model="show"
      ref="sku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
  />
  <!--底部栏-->
  <goods-tab-bar @addToCart="addToCart" :badge="badge"></goods-tab-bar>
</div>
</template>

<script>
import {getGoodsDetail, getGoodsRelated, addCart, getCartNum} from "@/request/api";
import tips from "@/components/tips";
import ProductList from "@/components/ProductList";
import GoodsTabBar from "@/components/GoodsTabBar";

export default {
name: "ProductDetail",
  components:{
    GoodsTabBar,
    ProductList,
    tips
  },
  data(){
  return {
    id:this.$route.query.id,
    gallery:[],
    info:{},
    attribute:[],
    issue:[],
    goodsList:[],
    productList:[],
    badge:0,
    //sku配置
    show:false,
    sku:{
      tree:[],
      price:"",
      stock_num:"",
      hide_stock:false,
    },
    goods:{
      picture:"",
    }
  }
  },
  methods:{
    async getProductDetailById(id){
        const {data:res} = await getGoodsDetail({
          'id':id
        })
      // console.log(res);
      if(res.errno == 0) {
        let{gallery,info,attribute,issue,productList} = res.data;
        console.log(res)
        this.gallery = gallery;
        this.info = info;
        this.attribute = attribute;
        this.issue = issue;
        this.sku.price = info.retail_price;
        this.productList = productList;
        this.sku.stock_num = info.goods_number;
        this.goods.picture = info.list_pic_url;
      }
    },
    async getProductRelatedById(id) {
      const {data:res} = await getGoodsRelated({
        'id':id
      })
      if(res.errno == 0) {
        let {goodsList} = res.data;
        console.log(res)
        this.goodsList = goodsList;
      }
    },
    async addToCart() {
      if(this.show) {
          //获取sku购买数量
        console.log(this.$refs.sku.getSkuData().selectedNum)
        const {data:res} = await addCart({
          'goodsId':this.id,
          'productId':this.productList[0].id,
          'number':this.$refs.sku.getSkuData().selectedNum
        })
        if(res.errno == 0){
          this.badge = res.data.cartTotal.goodsCount;
          this.$toast.success('添加成功')
          setTimeout(() => {
            this.$router.push('/cart')
          },500)
        }
      }else{
        this.show = true;
      }
    },
    async getCartNum() {
      const {data: res} = await getCartNum();
      if (res.errno == 0) {
        console.log(res)
        this.badge = res.data.cartTotal.goodsCount;
      }
    },
  },
  mounted() {
    this.getCartNum();
    this.getProductDetailById(this.id);
    this.getProductRelatedById(this.id);
  },
}
</script>

<style lang="less" scoped>
.info {
  background-color: #fff;
  text-align: center;
  padding: .2rem 0;
  border-bottom: 1px solid #cbcbcb;
  h3 {
    font-weight: normal;
    font-size: .2rem;
    line-height: .3rem;
  }
  p {
    color: #999;
    font-size: .12rem;
    line-height: .3rem;
  }
  div {
    color: darkred;
    font-size: .12rem;
    line-height: .3rem;
  }
}

.attribute {
  background-color: #fff;
  padding: .2rem 4%;
  h4 {
    font-weight: normal;
    font-size: .16rem;
    margin-bottom: .2rem;
  }
  ul{
    li {
      background: #efefef;
      border-radius: 5px;
      line-height: .4rem;
      margin-bottom: .1rem;
      display: flex;
      justify-content: space-between;
      span {
        width: 20%;
        text-align: right;
      }
      section {
        flex: 1;
        padding-left: .2rem;
      }
    }
  }
}
/deep/.desc {
  img {
    width: 100%;
    display: block;
  }
}

.title {
  width: 100%;
  height: .5rem;
  background: #fff;
  position: relative;
  &::before {
    content: "";
    height: 2px;
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333;
    margin-left: -25%;
  }
  span {
    display: block;
    position: relative;
    width: 30%;
    background-color:#fff;
    margin: 0 auto;
    text-align: center;
    line-height: .5rem;
    height: .5rem;
  }
}
.issue {
  padding: 0 4%;
  background-color: #fff;
  h3 {
    height: .5rem;
    line-height: .5rem;
    padding-left: .2rem;
    font-weight: normal;
    position: relative;
    &::before {
      content: "";
      height: 4px;
      width: 4px;
      border-radius: 2px;
      background: darkred;
      display: inline-block;
      position: absolute;
      top: 50%;
      margin-top: -2px;
      left: 0;
    }
  }
  p {
    font-size: .12rem;
    padding-left: .2rem;
    line-height: .2rem;
  }
}
.van-sku-container {
  min-height: auto;
}

</style>